// alert 的 icon 颜色对应 map
$alert-icon-colors: (
  'info': #1890ff,
  'success': $success,
  'warning': $warning,
  'error': $danger,
);

.alert {
  font-variant: tabular-nums;
  list-style: none;
  position: relative;
  word-wrap: break-word;
  max-height: 1000vh;
  padding: $alert-padding-top $alert-padding-right $alert-padding-bottom
    $alert-padding-left;
  color: $alert-font-color;
  font-size: $alert-font-size;
  line-height: $alert-line-height;
  border-radius: $alert-border-radius;
  background-color: $alert-default-background;
  border: 1px solid $alert-default-border;
  margin-bottom: 16px;

  &-no-icon {
    padding: $alert-no-icon-padding-tb $alert-no-icon-padding-lr;
  }

  &-with-description {
    position: relative;
    padding: 15px 15px 15px 63px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5715;
    border-radius: 2px;
    &.alert-no-icon {
      padding: 15px;
    }
    .alert-message {
      display: block;
      margin-bottom: 4px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
    .alert-description {
      display: block;
    }
    .alert-icon {
      position: absolute;
      top: 15px;
      left: 24px;
      font-size: 24px;
    }
  }
  &-description {
    display: none;
    font-size: 14px;
    line-height: 22px;
  }
  &-success {
    background-color: $alert-success-background;
    border: 1px solid $alert-success-border;
  }
  &-warning {
    background-color: $alert-warning-background;
    border: 1px solid $alert-warning-border;
  }
  &-error {
    background-color: $alert-error-background;
    border: 1px solid $alert-error-border;
  }

  .alert-icon {
    position: absolute;
    top: 13.00001px;
    left: 16px;
    @each $key, $value in $alert-icon-colors {
      &-#{$key} {
        color: $value;
      }
    }
  }

  .alert-close-icon {
    position: absolute;
    top: 12.0005px;
    right: 16px;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 12px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
  }
}
